<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 100px;height: 100px;background: red;
            margin-top: 50px;opacity: 0.3;}
    </style>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <script type="text/javascript">
        var div = document.getElementsByTagName("div");
        var timer = null;
        for(var i=0;i<div.length;i++){
            div[i].timer = null;
            div[i].onmouseover = function () {
                startMove(this,100);//鼠标移上去，变成完全不透明
            }
            div[i].onmouseout = function () {
                startMove(this,30);
            }
        }

        //定义起点
        var alpha = 30;
        function startMove(obj,target) {
            clearInterval(timer);
            timer = setInterval(function () {
                var speed = (target-alpha)/3;
                speed=speed>0?Math.ceil(speed):Math.floor(speed);

                if(alpha==target){
                    clearInterval(timer);
                }else{
                    alpha = alpha + speed;
                    //注意这里不要用this
                    obj.style.opacity = alpha/100;
                }
                document.title = alpha;
            },30)
        }


    </script>

</body>
</html>